import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const TrafficFlowPredictionMeta: IPublicTypeComponentMetadata = {
  componentName: 'TrafficFlowPrediction',
  title: '流量预测',
  category: '信息展示',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TrafficFlowPrediction',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
   {
    name: 'ref',
    propType: 'object',
  },
  {
    name: 'key',
    propType: 'string',
  },
  {
    name: 'style',
    propType: 'object',
  },
  {
    name: 'statusBar',
    propType: 'object',
    description: '状态栏配置'
  },
  {
    name: 'dataStats',
    propType: 'object',
    description: '数据统计配置'
  },
  {
    name: 'dayChartTitle',
    propType: 'object',
    description: '交通日线图标题配置'
  },
  {
    name: 'lineChart',
    propType: 'object',
    description: '折线图配置'
  }
  ],
  configure: {
    props: [
      // 基础属性
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '组件宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度'
            },
            setter: 'NumberSetter',
            defaultValue: 560,
          },
          {
            name: 'noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ]
      },
      // 状态栏配置
      {
        name: 'statusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '状态栏配置',
        },
        items: [
          {
            name: 'statusBar.title',
            title: {
              label: '中文标题',
              tip: '状态栏显示的中文标题'
            },
            setter: 'StringSetter',
            defaultValue: '流量预测',
          },
          {
            name: 'statusBar.subtitle',
            title: {
              label: '英文标题',
              tip: '状态栏显示的英文标题'
            },
            setter: 'StringSetter',
            defaultValue: 'TRAFFIC PREDICTION',
          }
        ]
      },
     
      // 数据统计配置
      {
        name: 'dataStatsConfig',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据统计配置',
        },
        items: [
          {
            name: 'dataStats.mainValue.text',
            title: {
              label: '主要数值',
              tip: '显示的主要数值'
            },
            setter: 'StringSetter',
            defaultValue: '35.19',
          },
          {
            name: 'dataStats.unitConfig.text',
            title: {
              label: '数值单位',
              tip: '主要数值的单位'
            },
            setter: 'StringSetter',
            defaultValue: '万',
          },
          {
            name: 'dataStats.title.text',
            title: {
              label: '数据标题',
              tip: '数据统计的标题'
            },
            setter: 'StringSetter',
            defaultValue: '铁路到发今日预测客流',
          },
          {
            name: 'dataStats.bottomPanel.leftText.text',
            title: {
              label: '左侧文本',
              tip: '底部面板左侧文本'
            },
            setter: 'StringSetter',
            defaultValue: '今日预测客流处于历史',
          },
          {
            name: 'dataStats.bottomPanel.rightText.text',
            title: {
              label: '右侧文本前缀',
              tip: '底部面板右侧文本前缀'
            },
            setter: 'StringSetter',
            defaultValue: '第',
          },
          {
            name: 'dataStats.bottomPanel.rightText.rankNumber',
            title: {
              label: '排名数字',
              tip: '排名数字'
            },
            setter: 'StringSetter',
            defaultValue: '1148',
          },
          {
            name: 'dataStats.backgroundImage',
            title: {
              label: '背景图片',
              tip: '数据统计区域的背景图片'
            },
            setter: 'StringSetter',
            defaultValue: '/static/images/shouye/sjzb.png',
          },
          {
            name: 'dataStats.bottomPanel.backgroundImage',
            title: {
              label: '底部背景图片',
              tip: '底部面板的背景图片'
            },
            setter: 'StringSetter',
            defaultValue: '/static/images/shouye/bj51.png',
          }
        ]
      },
      // 数据统计样式配置
      {
        name: 'styleConfig',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式配置',
        },
        items: [
          {
            name: 'dataStats.mainValue.fontSize',
            title: {
              label: '主值字体大小',
              tip: '主要数值的字体大小'
            },
            setter: 'NumberSetter',
            defaultValue: 28,
          },
          {
            name: 'dataStats.mainValue.color',
            title: {
              label: '主值颜色',
              tip: '主要数值的颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#1AD7FF',
          },
          {
            name: 'dataStats.mainValue.fontFamily',
            title: {
              label: '主值字体',
              tip: '主要数值的字体'
            },
            setter: 'StringSetter',
            defaultValue: 'DINAlternate',
          },
          {
            name: 'dataStats.title.fontSize',
            title: {
              label: '标题字体大小',
              tip: '标题的字体大小'
            },
            setter: 'NumberSetter',
            defaultValue: 16,
          },
          {
            name: 'dataStats.title.color',
            title: {
              label: '标题颜色',
              tip: '标题的颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
           {
            name: 'dataStats.bottomPanel.leftText.color',
            title: {
              label: '底部左侧文本颜色',
              tip: '底部左侧文本颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
           {
            name: 'dataStats.bottomPanel.rightText.color',
            title: {
              label: '底部右侧文本颜色',
              tip: '底部右侧文本颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },

        ]
      },
       // 交通日线图标题配置
      {
        name: 'dayChartTitle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '交通日线图标题配置',
        },
        items: [
          {
            name: 'dayChartTitle.title',
            title: {
              label: '标题',
              tip: '交通日线图区域的标题'
            },
            setter: 'StringSetter',
            defaultValue: '交通日线图',
          }
        ]
      },
      // 折线图配置
      {
        name: 'lineChart',
        type: 'group',
        display: 'accordion',
        title: {
          label: '折线图配置',
        },
        items: [
          {
            name: 'lineChart.data',
            title: {
              label: '图表数据',
              tip: '折线图的数据'
            },
            setter: 'JsonSetter',
            defaultValue: [],
          },
          {
            name: 'lineChart.config',
            title: {
              label: '图表配置',
              tip: '折线图的配置项'
            },
            setter: 'JsonSetter',
            defaultValue: {
              smooth: true,
              point: { size: 3, shape: 'circle' },
              color: ['#1890ff', '#52c41a', '#faad14']
            },
          },
          {
            name: 'lineChart.width',
            title: {
              label: '图表宽度',
              tip: '折线图的宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'lineChart.height',
            title: {
              label: '图表高度',
              tip: '折线图的高度'
            },
            setter: 'NumberSetter',
            defaultValue: 180,
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
    },
    component: {
      isContainer: false,
      isModal: false,
    },
  },
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1UyR3MKMFvk_!!6000000002580-55-tps-200-200.svg',
  keywords: ['流量预测', 'traffic', 'prediction', 'flow', 'chart', 'data', 'stats'],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '流量预测',
    screenshot: '',
    schema: {
      componentName: 'TrafficFlowPrediction',
      props: {
        width: 500,
        height: 560,
        noResponsiveScale: true,
        statusBar: {
          title: '流量预测',
          subtitle: 'TRAFFIC PREDICTION'
        },
       
        dataStats: {
          mainValue: {
            text: '35.19'
          },
          unitConfig: {
            text: '万'
          },
          title: {
            text: '铁路到发今日预测客流'
          },
          bottomPanel: {
            leftText: {
              text: '今日预测客流处于历史'
            },
            rightText: {
              text: '第',
              rankNumber: '1148'
            }
          }
        },
        dayChartTitle: {
          title: '交通日线图'
        },
        lineChart: {
          data: [],
          config: {
            smooth: true,
            point: { size: 3, shape: 'circle' },
            color: ['#1890ff', '#52c41a', '#faad14']
          }
        }
      }
    }
  }
];

export default {
  ...TrafficFlowPredictionMeta,
  snippets
};